<template>
    <view class="container">
        <!-- 预留时间筛选空间 -->
       <!-- <view class="filter-space">
            <text>时间筛选区域（待实现）</text>
        </view> -->
        <!-- 图片瀑布流展示区域 -->
        <view class="waterfall-container">
            <view class="waterfall-column" :style="{ width: columnWidth + 'px' }" v-for="(column, index) in columns" :key="index">
                <view v-for="(image, imgIndex) in column" :key="imgIndex" @click="openCustomPreview(image, imgIndex)">
                    <image
                        :src="image.picture_url"
                        style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; margin-bottom: 10px; width: 100%;">
                    </image>
                </view>
            </view>
        </view>
        <!-- uview 模态框 -->
        <u-popup :show="showPreview" mode="center">
            <view class="preview-content">
                <image :src="currentPreviewImage" mode="aspectFit" class="preview-image"></image>
                <view class="button-group">
                    <u-button @click="closeCustomPreview">关闭</u-button>
                    <u-button @click="saveImageToAlbum">保存到相册</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { picList } from '../../api/image.js'
export default {
    data() {
        return {
            // 历史图片数据
            images: [
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10231744447515_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10251744447518_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10291744447526_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10341744447534_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10191744447510_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10211744447513_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10231744447515_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10251744447518_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10291744447526_.pic.jpg' },
				{ picture_url: 'http://qiniu-image.akfang.cn/wx10341744447534_.pic.jpg' },
            ],
            // 列数
            columnCount: 2,
            // 列宽度
            columnWidth: 0,
            // 列数据
            columns: [],
            // 图片裁剪模式
            aspectMode: 'aspectFill',
            // 是否显示自定义预览模态框
            showPreview: false,
            // 当前预览的图片地址
            currentPreviewImage: ''
        };
    },
    onShow() {
        this.initWaterfall();
    },
    methods: {
        // 初始化瀑布流布局
        initWaterfall() {
            const windowWidth = uni.getSystemInfoSync().windowWidth;
            const containerPadding = 20;
            const columnGutter = 10;
            // 计算列宽度，考虑容器内边距和列间距
            this.columnWidth = (windowWidth - containerPadding * 2 - columnGutter * (this.columnCount - 1)) / this.columnCount;
            this.columns = Array.from({ length: this.columnCount }, () => []);
			// picList().then(res=>{
			// 	if(res.code === 200) {
			// 		this.images = res.list;
			// 	}
			// })
			
            this.images.forEach((image, index) => {
                const columnIndex = index % 2;
                this.columns[columnIndex].push(image);
            });
        },
        // 打开自定义图片预览
        openCustomPreview(img, index) {
            this.currentPreviewImage = img.picture_url;
            this.showPreview = true;
        },
        // 关闭自定义图片预览
        closeCustomPreview() {
            this.showPreview = false;
        },
        // 保存图片到相册
        async saveImageToAlbum() {
            try {
				const { authSetting } = await uni.getSetting();
				if (!authSetting['scope.writePhotosAlbum']) {
					const res = await uni.authorize({
						scope: 'scope.writePhotosAlbum'
					});
					uni.showModal({
						title: '权限提示',
						content: '您之前拒绝了保存图片到相册的权限，若要继续使用该功能，请前往小程序设置中开启。',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting();
							}
						}
					});
					// 后续进行保存图片操作
				} else {
					const downloadRes = await uni.downloadFile({
						url: this.currentPreviewImage
					});
					uni.saveImageToPhotosAlbum({
						filePath: downloadRes.tempFilePath,
						success() {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail(err) {
							console.log(err);
							uni.showToast({
								title: '图像保存失败',
								icon: 'none'
							});
						}
					});
				}
			} catch (error) {
				console.error('授权出错', error);
			}
		}
    }
};
</script>

<style lang="scss">
.container {
    padding: 20px;
    box-sizing: border-box;
}

.filter-space {
    padding: 10px;
    background-color: #f4f4f4;
    margin-bottom: 20px;
    text-align: center;
}

.waterfall-container {
    display: flex;
    justify-content: space-between;
}

.waterfall-column {
    display: flex;
    flex-direction: column;
}

.preview-content {
    padding: 20px;
    text-align: center;
}

.preview-image {
    max-width: 100%;
    max-height: 80vh;
    margin-bottom: 20px;
}

.button-group {
    display: flex;
    justify-content: space-around;
}
</style>    